<template>
    <view class="view-wrap menu">
        <h1>这是个首页</h1>

        <!-- 显示下载进度 -->
        <u-modal :show="showModal" :show-confirm-button="false" :show-cancel-button="false">
            <view class="modal-content">
                <view class="modal-content__company">
                    {{ downloadInfo.company }}
                </view>
                <view class="modal-content__progress">
                    <u-line-progress :percentage="downloadInfo.progress" active-color="#19BE6B"></u-line-progress>
                </view>
            </view>
        </u-modal>
    </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
// import { saveStorage, getStorage } from '@/utils/uni-storage';
import { onShow, onLoad } from '@dcloudio/uni-app';
import ResquestAPI from '@/api/login/index';
import { showToast } from '@/utils/messageTip';
import { DOWNLOAD, UPDATE_STATUS } from '@/constant/download';

/**
 * 跳转页面
 * @param subMenu 页面路径
 */
// function navigateTo(subMenu) {
//     uni.navigateTo({
//         url: subMenu.path,
//     });
// }

/**
 ******************* 校验 app 是否为最新版本 *******************
 */
const baseUrl = import.meta.env.VITE_API_URL;
const downloading = ref<boolean>(false); // 更新是否已经在进行中
const showModal = ref<boolean>(false); // 是否渲染进度条弹窗
const downloadInfo = ref<Record<string, string | number>>({
    company: '',
    progress: 0,
});

/**
 * 校验版本信息
 */
async function checkVersion() {
    const res = await ResquestAPI.checkVersion();

    if (!res || res.data?.isForce !== UPDATE_STATUS['强制更新']) {
        return;
    }

    plus.runtime.getProperty(plus.runtime.appid as string, (wgtinfo) => {
        if (wgtinfo?.versionCode && res.data.appVersion && Number(wgtinfo?.versionCode) < Number(res.data.appVersion)) {
            downloading.value = true;

            uni.showModal({
                content: `当前 APP 版本号为 ${wgtinfo.versionCode}，最新版本号为 ${res.data.appVersion}，将下载最新版本！`,
                showCancel: false,
                success: (e) => {
                    if (e.confirm) {
                        confirmUpdate();
                    }
                },
            });
        }
    });
}

/**
 * 确认更新
 */
async function confirmUpdate() {
    if (DOWNLOAD.hasOwnProperty(baseUrl)) {
        download(DOWNLOAD[baseUrl][0], DOWNLOAD[baseUrl][1]);
    } else {
        showToast('当前环境暂无更新');
        downloading.value = false;
    }
}

/**
 * 下载安装
 */
async function download(company: string, url: string) {
    downloadInfo.value.company = company;
    showModal.value = true;

    const downloadTask = uni.downloadFile({
        url,
        success: (res) => {
            if (res.statusCode === 200) {
                plus.runtime.install(
                    res.tempFilePath,
                    {
                        force: true,
                    },
                    function () {
                        plus.runtime.restart();
                    },
                    function (err) {
                        console.log('install-failed：' + err);
                    }
                );
            }
        },
        fail(err) {
            console.log('download-failed：' + err);
        },
        complete() {
            downloading.value = false;
            showModal.value = false;
        },
    });

    // 监听下载进度
    downloadTask.onProgressUpdate((res) => {
        downloadInfo.value.progress = res.progress;
    });
}

/**
 * 页面前台展示
 */
onShow(() => {
    if (!downloading.value) {
        // #ifdef APP-PLUS
        checkVersion();
        // #endif
    }
});
onLoad(() => {
    uni.hideNavigationBarLoading()
});
</script>
<style lang="scss" scoped>
.menu {
    &__menu-wrap {
        text-align: center;
        width: 100%;
    }

    &__submenu {
        width: 130rpx;
        height: 130rpx;
        padding: 14rpx;
        margin: 10rpx;
        color: #fff;
        border-radius: 10rpx;
        box-shadow: 0 2px 12px 0 rgba(33, 150, 243, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    &__icon {
        font-size: 15rpx;
    }

    &__sub-label {
        margin-top: 5rpx;
        font-size: 24rpx;
        text-align: center;
        font-weight: bold;
    }
}

.modal-content {
    width: 100%;
    padding: 20rpx;

    &__company {
        margin-bottom: 14rpx;
    }
}
</style>
